<template>
  <clanSionFrom v-if="showCreateFormFlag" @closeCreateForm="closeCreateForm" />
  <view class="culture-page">
    <!-- 没有存在的宗亲荟，可以创建宗亲荟 -->
    <view v-if="!showCreateFormFlag">
      <view v-if="myClanData && myClanData.id" class="my-clan">
        <view class="section-title">我的宗亲荟</view>
        <view class="article-item" @click="handleClan(myClanData)">
          <view class="article-cover">
            <image class="article-cover-img" :src="myClanData.cover || 'https://boyangli.oss-cn-shanghai.aliyuncs.com/20250930/bcc4123c1a9244b680206199766526ee.png'" mode="aspectFill" />
          </view>
          <view class="article-content">
            <view class="article-title">{{ myClanData.name }}</view>
            <view class="article-excerpt" v-html="myClanData.history"></view>
            <view class="article-meta">
              <view class="meta-left">
                <text class="author">{{ myClanData.location }}</text>
              </view>
              <view class="meta-right">
                <text class="view-count">{{ myClanData.createTime }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view v-if="!myClanData && routeType == 'once'" class="no-clan">
        <view class="no-clan-desc">如果还没有找到需要加入的宗亲荟，可以创建家谱</view>
        <view v-if="selfClanFlag" class="no-clan-button" @click="handleCreateClan">创建宗亲荟</view>
      </view>
    </view>

    <view v-if="clanList.length" class="all-clan">
      <view class="section-header-list">
        <view class="section-title">全部宗亲荟</view>
        <view class="clan-count">共 {{ clanList.length }} 个</view>
      </view>
      <view class="clan-list">
        <view class="article-list">
          <view
            v-for="(item, index) in clanList"
            :key="index"
            class="article-item"
            @click="handleClan(item)"
          >
            <!-- 文章封面 -->
            <view class="article-cover">
              <!-- <image v-if="item.qrcodeUrl" :src="item.qrcodeUrl" alt="" /> -->
              <image class="article-cover-img" :src="item.cover || 'https://boyangli.oss-cn-shanghai.aliyuncs.com/20250930/bcc4123c1a9244b680206199766526ee.png'" mode="aspectFill" />
            </view>
            <!-- 文章内容 -->
            <view class="article-content">
              <view class="article-title">{{ item.name }}</view>
              <view class="article-excerpt" v-html="item.history"></view>
              <view class="article-meta">
                <view class="meta-left">
                  <text class="author">{{ item.location }}</text>
                </view>
                <view class="meta-right">
                  <text class="view-count">{{ item.createTime }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 空状态 -->
    <view v-if="!clanList.length && routeType == 'all' && !isLoading" class="empty-state">
      <image class="empty-icon" src="https://boyangli.oss-cn-shanghai.aliyuncs.com/20250930/cad36e2400804dc9ba842d89e30c93ed.png" mode="aspectFit" />
      <text class="empty-title">暂无宗亲内容</text>
      <text class="empty-desc">当前分类下暂无相关内容，请切换其他分类查看</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import clanAssociationAPI from "@/api/genealogy/clanAssociation";
import clanSionFrom from "@/pages/work/clan/component/component/clanSionFrom.vue";

const myClanData = ref<clanItem | null>(null); // 添加我的宗亲荟数据
// 文章列表数据
const clanList = reactive<clanItem[]>([]);
const isLoading = ref(false);
const routeType = ref("once");
// 是否为我的宗亲荟进入
const selfClanFlag = ref(false);
// 判断是否点击了我的家谱
const isMyClanId = ref();
// 创建宗亲荟荟表单判断
const showCreateFormFlag = ref(false);

const familyId = ref(null);
// 子组件关闭宗亲表单
const closeCreateForm = () => {
  setTimeout(() => {
    showCreateFormFlag.value = false;
    if (routeType.value === "once") {
      getMyClan();
    } else if (routeType.value === "all") {
      getClanList();
    }
  }, 1000);
};
interface clanItem {
  familyId: string;
  familyName: string;
  history: string;
  name: string;
  updataTime: string;
  location: string;
  qrcodeUrl: string;
  longitude: Number;
  latitude: Number;
  createTime: string;
  cover: string;
}

// 点击创建宗亲荟
const handleCreateClan = () => {
  showCreateFormFlag.value = true;
};
const getClanList = (params: Object) => {
  isLoading.value = true; // 开始加载时设置为true
  clanList.length = 0; // 清空现有数据
  clanAssociationAPI
    .getClanList(params)
    .then((res: any) => {
      if (res && res.list && res.list.length > 0) {
        clanList.push(...res.list);
      }
      isLoading.value = false; // 无论数据是否为空，加载完成后设置为false
    })
    .catch(() => {
      isLoading.value = false; // 加载失败也设置为false
    });
};
// 获取我的宗亲荟
const getMyClan = (params: Object) => {
  clanAssociationAPI.getClanList(params).then((res: any) => {
    console.log(res.list);
    if (res) {
      isMyClanId.value = res.id;
      // 将获取到的数据赋值给 myClanData
      myClanData.value = res.list[0];
    }
  });
};
const handleClan = (params: any) => {
  const flag = isMyClanId.value === params.id;
  uni.navigateTo({
    url: `/pages/work/clan/index?clanId=${params.id}&checkMyClan=${flag ? 1 : 0}`,
  });
};
onLoad((query: any) => {
  routeType.value = query.type || 'all';
  familyId.value = query.familyId;
  // 是否为我的宗亲荟进入
  selfClanFlag.value = query.mySelf;
  const params = {
    familyId: familyId.value ? familyId.value : "",
    pageNum: 1,
    pageSize: 10,
  };
  if (query) {
    if (query.type == "once") {
      uni.setNavigationBarTitle({
        title: "我的宗亲荟",
      });
      getMyClan(params);
    } else if (query.type == "all") {
      uni.setNavigationBarTitle({
        title: "宗亲荟列表",
      });
      getClanList(params);
    }
  }
});


// 分享给朋友
const onShareAppMessage = () => {
  return {
    title: "数字家谱系统 - 连接家族，传承文化",
    path: "/pages/work/clan/clanList?type=all",
    // imageUrl: "/static/images/default_banner.png",
  };
};

// 分享到朋友圈
const onShareTimeline = () => {
  return {
    title: "数字家谱系统 - 连接家族，传承文化",
    query: "share=true",
    // imageUrl: "/static/images/default_banner.png",
  };
};

// 导出生命周期钩子
defineExpose({
  onShareAppMessage,
  onShareTimeline,
});
// 页面加载时获取数据
onMounted(() => {});
</script>

<style lang="scss">
.section-header-list {
  display: flex;
  justify-content: space-between;
}
// 我的宗亲荟样式
/* 添加我的宗亲荟样式 */
.my-clan {
  background-color: #fff;
  border-radius: 20rpx;
  margin: 20rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}
.all-clan {
  background-color: #fff;
  border-radius: 0.625rem;
  margin: 0.625rem;
  padding: 0.9375rem;
  box-shadow: 0 0.125rem 0.625rem rgba(0, 0, 0, 0.05);
}
.section-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 20rpx;
  padding-bottom: 15rpx;
  border-bottom: 1px solid #f0f0f0;
  border-left: 6rpx solid #667eea;
  padding-left: 10rpx;
}

.my-clan-card {
  display: flex;
  padding: 20rpx;
  border-radius: 16rpx;
  background-color: #f9f9f9;
  transition: all 0.3s ease;
}

.my-clan-card:active {
  transform: scale(0.98);
}

.clan-cover {
    width: 120rpx;
    height: 120rpx;
    border-radius: 12rpx;
    overflow: hidden;
    margin-right: 20rpx;
  }

  .clan-cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

.clan-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.clan-name {
  font-size: 30rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 10rpx;
}

.clan-location {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.clan-time {
  font-size: 24rpx;
  color: #999;
}

// 我的宗亲荟样式结束
.no-clan {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 200rpx 40rpx 100rpx;
  background-color: #fff;
  border-radius: 20rpx;
  margin: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.no-clan-icon {
  margin-bottom: 30rpx;
}

.no-clan-text {
  font-size: 36rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 16rpx;
}

.no-clan-desc {
  font-size: 28rpx;
  color: #999;
  margin-bottom: 40rpx;
}

.no-clan-button {
  padding: 20rpx 60rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  font-size: 30rpx;
  border-radius: 50rpx;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.3);
}

.no-clan-button:active {
  transform: scale(0.96);
  box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.2);
}

.error-container {
  width: 100%;
}

.culture-page {
  background-color: #f8f8f8;
  // padding-bottom: 30rpx;
}

.category-selector {
  padding: 20rpx 0 10rpx 0;
  background: #fff;
  border-radius: 20rpx;
  margin: 0 20rpx 10rpx 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.08);
}

.category-scroll {
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.category-list {
  display: flex;
  align-items: center;
  gap: 18rpx; // 标签间距
  padding: 0 10rpx;
}

.category-item {
  min-width: 120rpx;
  padding: 18rpx 38rpx;
  border-radius: 32rpx;
  background-color: #f4f6fa;
  color: #333;
  font-size: 28rpx;
  font-weight: 500;
  text-align: center;
  transition: all 0.2s;
  box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.04);

  &.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    font-weight: bold;
    box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.18);
    border: none;
  }

  &:active {
    transform: scale(0.97);
  }
}

.article-item {
    background-color: #fff;
    border-radius: 16rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease;

    &:active {
      transform: scale(0.98);
    }

    .article-cover {
      width: 100%;
      height: 320rpx;
      border-radius: 12rpx;
      overflow: hidden;
      margin-bottom: 20rpx;
    }

    .article-cover-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .article-content {
      flex: 1;
      padding: 20rpx;
    .article-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
      margin-bottom: 16rpx;
      line-height: 1.4;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }

    .article-excerpt {
      font-size: 28rpx;
      color: #666;
      line-height: 1.5;
      margin-bottom: 20rpx;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
    }

    .article-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 24rpx;
      color: #999;

      .meta-left {
        display: flex;
        align-items: center;

        .author {
          margin-right: 20rpx;
          color: #1989fa;
          white-space: nowrap;
          /* 禁止换行 */
          overflow: hidden;
          /* 隐藏溢出内容 */
          text-overflow: ellipsis;
          /* 显示省略号 */
          width: 10rem;
          /* 必须指定宽度（或父级有宽度限制） */
        }

        .publish-time {
          color: #999;
        }
      }

      .meta-right {
        .view-count {
          display: flex;
          align-items: center;

          &:before {
            content: "";
            display: inline-block;
            width: 24rpx;
            height: 24rpx;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999"><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/></svg>');
            background-size: cover;
            margin-right: 6rpx;
          }
        }
      }
    }
  }
}

.load-more {
  text-align: center;
  padding: 40rpx 20rpx;

  .load-more-btn {
    display: inline-block;
    padding: 20rpx 40rpx;
    background-color: #fff;
    border-radius: 30rpx;
    font-size: 28rpx;
    color: #666;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;

    &:active {
      transform: scale(0.95);
    }

    &.loading {
      opacity: 0.6;
    }
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 10rem;
  .empty-icon {
    width: 240rpx;
    height: 240rpx;
    margin-bottom: 40rpx;
    opacity: 0.8;
  }

  .empty-title {
    font-size: 32rpx;
    color: #666;
    font-weight: 500;
    margin-bottom: 16rpx;
  }

  .empty-desc {
    font-size: 28rpx;
    color: #999;
    text-align: center;
    line-height: 1.5;
  }
}
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20rpx 20rpx 10rpx;
}
.section-header-list {
  .section-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
    border: none;
    border-left: 6rpx solid #667eea;
  }
}

.clan-count {
  font-size: 26rpx;
  color: #999;
}
</style>
